<template>
	<div>
		<!-- 主内容容器 -->
		<div>
			<!-- 顶部统计卡片区域 -->
			<div class="statistic-cards-container">
				<!-- 统计卡片1 -->
				<el-card shadow="hover" class="item_statistics">
					<div class="card-content">
						<div class="card-info-wrapper">
							<div class="columns">
								<div class="statistic-value">{{ one }}</div>
								<div class="statistic-label">{{ oneText }}</div>
							</div>
							<img src="../../assets/oneMeishi.png" alt="" class="statistic-icon">
						</div>
					</div>
				</el-card>

				<!-- 统计卡片2 -->
				<el-card shadow="hover" class="item_statistics">
					<div class="card-content">
						<div class="card-info-wrapper">
							<div class="columns">
								<div class="statistic-value">{{ two }}</div>
								<div class="statistic-label">{{ twoText }}</div>
							</div>
							<img src="../../assets/twoPlay.png" alt="" class="statistic-icon">
						</div>
					</div>
				</el-card>

				<!-- 统计卡片3 -->
				<el-card shadow="hover" class="item_statistics">
					<div class="card-content">
						<div class="card-info-wrapper">
							<div class="columns">
								<div class="statistic-value">{{ three }}</div>
								<div class="statistic-label">{{ threeText }}</div>
							</div>
							<img src="../../assets/threeShui.png" alt="" class="statistic-icon">
						</div>
					</div>
				</el-card>

				<!-- 统计卡片4 -->
				<el-card shadow="hover" class="item_statistics">
					<div class="card-content">
						<div class="card-info-wrapper">
							<div class="columns">
								<div class="statistic-value">{{ four }}</div>
								<div class="statistic-label">{{ fourText }}</div>
							</div>
							<img src="../../assets/fourRed.png" alt="" class="statistic-icon">
						</div>
					</div>
				</el-card>
			</div>

			<!-- 中间内容区域 -->
			<div class="top-content">
				<!-- 兑换记录表格 -->
				<el-card class="commission" shadow="hover">
					<div class="table-header">
						<div>今日兑换记录</div>
						<div>更多</div>
					</div>
					<el-table :data="renList" style="width: 100%" height="250"
						:header-cell-style="{ 'text-align': 'center' }">
						<el-table-column type="selection" width="45" fixed="left" />
						<el-table-column prop="id" label="序号 " width="60" fixed="left" />
						<el-table-column prop="name" label="用户名称" width="90" />
						<el-table-column prop="title" label="商品名称" show-overflow-tooltip min-width="150" />
						<el-table-column prop="num" label="数量" />
						<el-table-column prop="createtime" label="兑换时间" min-width="190" />
						<el-table-column prop="address" label="状态" fixed="right">
							<template #default="scope">
								<div>{{ scope.row.status == 1 ? '未兑换' : '已兑换' }}</div>
							</template>
						</el-table-column>
					</el-table>
				</el-card>

				<!-- 入驻统计环形图 -->
				<el-card class="InCome" shadow="hover">
					<div ref="BrokerAge" class="brokerage"></div>
				</el-card>
			</div>

			<!-- 销售量折线图 -->
			<div class="chart-container">
				<el-card shadow="hover">
					<div ref="lineDom" class="brokerage"></div>
				</el-card>
			</div>

			<!-- 销售金额柱状图 -->
			<div class="chart-container mt-5">
				<el-card shadow="hover">
					<div ref="barDom" class="brokerage"></div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup>
// 导入api和组件
import { ref } from 'vue';
import * as echarts from 'echarts';
import { Data, DataHistory } from '../../api/home/home';
import 'echarts-liquidfill';
import '../../style/all.css'//全局css
// 用户信息
const user = JSON.parse(localStorage.getItem('tokens'));
console.log(user);

// 声明全局变量
const data_a = ref('')
const one = ref('')  // 统计卡片1的数值
const two = ref('')  // 统计卡片2的数值
const three = ref('')  // 统计卡片3的数值
const four = ref('')  // 统计卡片4的数值
const oneText = ref('')  // 统计卡片1的文本
const twoText = ref('')  // 统计卡片2的文本
const threeText = ref('')  // 统计卡片3的文本
const fourText = ref('')  // 统计卡片4的文本
const renList = ref([])  // 兑换记录表格数据

// 请求总数据
const data = () => {
	Data({
		uid: user.userinfo.id,
	}).then(res => {
		// 初始化各个图表和数据
		card(res.data.enter)  // 初始化环形图
		line(res.data.amount)  // 初始化折线图
		bar(res.data.sale, res.data.amount)  // 初始化柱状图

		// 设置统计卡片数据
		one.value = res.data.top[0].value
		two.value = res.data.top[1].value
		three.value = res.data.top[2].value
		four.value = res.data.top[3].value
		oneText.value = res.data.top[0].label
		twoText.value = res.data.top[1].label
		threeText.value = res.data.top[2].label
		fourText.value = res.data.top[3].label

		// 设置表格数据
		renList.value = res.data.exchange
	})
}
data()

// 今日兑换记录
const score = () => {
	DataHistory({
		uid: user.userinfo.id,
	}).then(res => {
		console.log(res);
	})
}
score()

// 购卡对比环形图
const BrokerAge = ref(null);
const card = (item) => {
	const brokerage = echarts.init(BrokerAge.value);
	const option = {
		tooltip: {
			position: 'top',
		},
		legend: {
			top: '35%',
			orient: 'vertical',
			left: 'center',
		},
		title: {
			text: '入驻',
			textStyle: {},
		},
		series: [
			{
				type: 'pie',
				radius: ['40%', '60%'],
				avoidLabelOverlap: true,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 2,
				},
				// 配置标签和指示线
				label: {
					show: true,
					position: 'outside', // 标签位置在外侧
					formatter: '{b}: {c}', // 只显示名称和数量
					color: '#333',
					fontStyle: 'normal',
					fontWeight: 'normal',
					fontSize: 10,
				},
				labelLine: {
					show: true,
					length: 10,
					length2: 20,
					lineStyle: {
						color: '#999',
						width: 1,
					},
				},
				data: [
					{ value: item[0].value, name: item[0].label }, // 总用户
					{ value: item[1].value, name: item[1].label }, // 已审核
					{ value: item[2].value, name: item[2].label }, // 未审核
				],
			},
		],
	};

	brokerage.setOption(option);
};

// 销售量折线图
const lineDom = ref(null);
const line = (item) => {
	let food = []  // 美食数据
	let lark = []  // 酒店数据
	let room = []  // 娱乐数据
	let scenic = []  // 游玩数据

	// 提取各类数据
	for (let i = 0; i < item.food.length; i++) {
		food.push(item.food[i].total_money)
	}
	for (let i = 0; i < item.lark.length; i++) {
		lark.push(item.lark[i].total_money)
	}
	for (let i = 0; i < item.room.length; i++) {
		room.push(item.room[i].total_money)
	}
	for (let i = 0; i < item.scenic.length; i++) {
		scenic.push(item.scenic[i].total_money)
	}
	console.log(item);

	const array = ref([])

	const lineIcon = echarts.init(lineDom.value);
	const option = {
		title: {
			text: '销售量',
			left: 'left'
		},
		tooltip: {
			orient: 'vertical',
			left: 'left'
		},
		legend: {
			data: ['美食', '酒店', '娱乐', '游玩']
			,
			type: 'plain'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: item.data.sort()  // x轴数据
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '美食',
				type: 'line',
				stack: 'Total',
				data: food
			},
			{
				name: '酒店',
				type: 'line',
				stack: 'Total',
				data: lark
			},
			{
				name: '娱乐',
				type: 'line',
				stack: 'Total',
				data: room
			},
			{
				name: '游玩',
				type: 'line',
				stack: 'Total',
				data: scenic
			}
		]
	};

	lineIcon.setOption(option);
}

// 销售金额柱状图
const barDom = ref(null);
const bar = (item, imo) => {
	console.log(imo);

	let food = []  // 美食数据
	let lark = []  // 酒店数据
	let room = []  // 娱乐数据
	let scenic = []  // 游玩数据

	// 提取各类数据
	for (let i = 0; i < item.food.length; i++) {
		console.log(item.food[i]);
		food.push(item.food[i].value)
	}
	for (let i = 0; i < item.lark.length; i++) {
		lark.push(item.lark[i].value)
	}
	for (let i = 0; i < item.room.length; i++) {
		room.push(item.room[i].value)
	}
	for (let i = 0; i < item.scenic.length; i++) {
		scenic.push(item.scenic[i].value)
	}
	console.log(food, lark);

	const array = ref([])
	const barIcon = echarts.init(barDom.value);
	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		title: {
			text: '销售金额/万',
			left: 'left'
		},
		legend: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: imo.data  // x轴数据
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],

		series: [
			{
				name: '美食',
				type: 'bar',
				stack: 'Total',
				data: food
			},
			{
				name: '酒店',
				type: 'bar',
				stack: 'Total',
				data: lark
			},
			{
				name: '娱乐',
				type: 'bar',
				stack: 'Total',
				data: room
			},
			{
				name: '游玩',
				type: 'bar',
				stack: 'Total',
				data: scenic
			}
		]
	};
	barIcon.setOption(option);
}
</script>

<style>

/* 统计卡片区域 */
.statistic-cards-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.item_statistics {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 23%;
    height: 130px;
}

.card-content {
    width: 100%;
}

.card-info-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    line-height: 35px;
}

.columns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.statistic-value {
    font-size: 20px;
}

.statistic-icon {
    width: 30px;
    height: 30px;
}

/* 中间内容区域 */
.top-content {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.commission {
    width: 65%;
    height: 100%;
    text-align: center;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
}

.InCome {
    width: 33.5%;
    height: 100%;
    position: relative;
}

.brokerage {
    width: 90%;
    height: 250px;
}

/* 图表容器 */
.chart-container {
    width: 100%;
}

.mt-5 {
    margin-top: 20px;
}

/* 表格样式保持不变 */
.el-card__body {
    width: 100% !important;
}

.el-table .cell.el-tooltip {
    min-width: 50px;
    white-space: nowrap;
    text-align: center;
}

.el-table--large .cell {
    padding: 0 16px;
    text-align: center;
}
</style>